<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>地铁图展示</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=subway&v=1.0&ak=qg9PHYboQU1S8n22m2FS5ajknGmiUDQg"></script>
    <style type="text/css">
        #container{height:100%}
    </style>
</head>
<body>
<div>
    <select id=city>
        <div>
            <span>起始位置:</span>
            <input type="text" id="startname" value="起点"/>
            =>
            <span>终点位置:</span>
            <input type="text" id="endname" value="终点"/>
            <input type="button" id="btn"  onclick="search()" value="搜索路线">
            <input type="button" id="shua"  onclick="makeflush()" value="刷新地铁地图">
        </div>
    </select>
</div>
<div><span>地铁图</span></div>
<div id="container">
</div>
<script type="text/javascript">
    var subwayCityName = '天津';
    var list = BMapSub.SubwayCitiesList;
    var subwaycity = null;
    $(function(){
        InitSelect(list);//初始化城市选择框
        InitMap(131,null);
    });
    //城市选择框改变事件，用于城市地图切换
    $("#city").change(function(){
        //var a =  $("#city :selected").text();
        //console.log(a);
        InitMap($("#city").val(),"哈工大");
    });
    //初始化城市选择框
    function InitSelect(list){
        for (var key in list) {
            var obj = document.getElementById("city");
            var option = document.createElement("option");//创建option节点
            option.innerText = list[key].name;
            option.value=list[key].citycode;
            obj.appendChild(option);
        }
    };
    for (var i = 0; i < list.length; i++) {
        if (list[i].name === subwayCityName) {
            subwaycity = list[i];
            break;
        }
    }
    // 获取地铁数据-初始化地铁图
    function InitMap(citycode,startname){
        subway = new BMapSub.Subway('container',citycode);
        subway.setZoom(0.7);
        var zoomControl  = new BMapSub.ZoomControl({
            anchor: BMAPSUB_ANCHOR_TOP_LEFT,
            offset: new BMapSub.Size(10,90)
        });
        subway.addControl(zoomControl);
        //添加站名点击事件
        subway.addEventListener('tap', function(e) {
            ///alert('您点击了"' + e.station.name + '"站');
            var marker = new BMapSub.Marker(e.station.name);//, {icon: startIcon}
            subway.addMarker(marker);               // 将标注添加到地图中
            // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            subway.setCenter(e.station.name)
            var a=$("#startname").val();
            /*var detail = new BMapSub.DetailInfo(subway);
            detail.search(a);*/
            var b=$("#endname").val();
            /*var detail = new BMapSub.DetailInfo(subway);
            detail.search(b);*/
            if(a==""||a=="起点"){
                $("#startname").val(e.station.name);
            }
            else
            {
                $("#endname").val(e.station.name);
            }
            subway.setZoom(0.7);
        });
        if(startname!=null){
            var marker = new BMapSub.Marker(startname);//, {icon: startIcon}
            subway.addMarker(marker);
            subway.setCenter(startname);
            subway.setZoom(1.5);
        }
    };

    subway.addControl(zoomControl);
    function search(){
        var drct = new BMapSub.Direction(subway);
        var a=$("#startname").val();
        var b=$("#endname").val();
        drct.search(a, b);
    };
    function makeflush(){
        window.location.reload();
    }
</script>
</body>
</html>